<template>
    <div class="right">
        <div class="header">会员中心-我的会员</div>
        <div class="content">
            <div class="width"><img src="@/assets/huiyuan.png" alt=""></div>
            <div class="width">
                <div class="grey">爱牛会员</div>
            </div>
            <div class="width">
                <div class="grey greys">VIP: {{ current }} - {{ nextCurrent }}</div>
            </div>
            <div class="width">
                <div class="button" @click="shengji">立即升级</div>
            </div>
            <div class="width">
                <el-checkbox-group v-model="checkList" :max="1">
                    <el-checkbox value="A" label="微信支付" size="large" />
                    <!-- <el-checkbox value="B" label="支付宝支付" size="large" /> -->
                </el-checkbox-group>
            </div>
            <div class="width">
                <div class="grey dengji">
                    <span style="color: #000;">等级</span>:当前为<span style="color: #000;">普通会员</span>，请申请<span
                        style="color: #FF0000;">爱牛会员</span>，将会开启更多的探索。
                </div>
            </div>
            <div class="width">
                <div class="des">成为会员的好处</div>
            </div>
            <div class="width">
                <div class="haochu mars">1.可以查看任何题的答案</div>
            </div>
            <div class="width">
                <div class="haochu">2.在会员期内不限数量</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { openVip } from '@/api/index'
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const current = ref('')
const nextCurrent = ref('')
const checkList = ref([])
onMounted(() => {
    // 获取当前日期
    const currentDate = new Date();

    // 获取当前年月日
    const currentYear = currentDate.getFullYear();
    const currentMonth = currentDate.getMonth() + 1; // 月份从0开始，需要加1
    const currentDay = currentDate.getDate();

    current.value = `${currentYear}/${currentMonth}/${currentDay}`

    // 获取相隔一年的日期
    const nextYearDate = new Date(currentDate);
    nextYearDate.setFullYear(currentYear + 1);

    const nextYear = nextYearDate.getFullYear();
    const nextMonth = nextYearDate.getMonth() + 1;
    const nextDay = nextYearDate.getDate();
    nextCurrent.value = `${nextYear}/${nextMonth}/${nextDay}`
})
const shengji = async () => {
    if (checkList.value.length === 0) {
        proxy?.$modal.msgError('请选择支付方式');
    } else {
        await openVip({})
        proxy?.$modal.msgSuccess('购买成功')
    }
}
</script>
<style scoped lang="scss">
.right {
    width: calc(100% - 410px);
    height: 100%;

    .header {
        width: 100%;
        padding: 15px 0;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        border-bottom: 1px solid #E6E6E6;
    }

    .content {
        width: 100%;
        height: calc(100% - 55px);
        display: flex;
        flex-wrap: wrap;
        align-content: center;

        .width {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 251px;
                height: 227px;
                margin-left: 30px;
            }

            .grey {
                font-size: 18px;
                color: #B4B4B4;
            }

            .greys {
                margin-top: 10px;
            }

            .button {
                width: 221px;
                height: 44px;
                background: #22AFE5;
                border-radius: 11px 11px 11px 11px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 20px;
                color: #FFFFFF;
                text-align: center;
                line-height: 44px;
                margin-top: 30px;
                margin-bottom: 40px;
                cursor: pointer;
            }

            .dengji {
                margin-top: 60px;
            }

            .des {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #000000;
                margin-top: 40px;
            }

            .haochu {
                font-family: SimSun;
                font-weight: 400;
                font-size: 14px;
                color: #868686;
                line-height: 2;
            }

            .mars {
                margin-top: 30px;
            }
        }
    }
}
</style>